<template>
	<view>
		<view class="send">
			<text>验证码已发送至</text>
			<text>{{phone}}</text>
		</view>
		<view class="datas">
			<text>60</text>
			<text>秒</text>
			<text>后重新获取</text>
		</view>
		<view class="inputBox" >
			<input type="number" maxlength=1 @blur="mCode" class="input"/>
			<!-- <input type="text" maxlength=1  class="input"/>
			<input type="text"  maxlength=1  class="input"/>
			<input type="text" maxlength=1  class="input"/>
			<input type="text" maxlength=1  class="input"/>
			<input type="text" maxlength=1  class="input"/> -->
		</view>
		<view class="active">
			<button type="primary" class="activeBtn" @click="next">下一步</button>
		</view>
	</view>
</template>

<script>
	import eonfox from '@/components/eonfox/eonfox.js';
	var ef = new eonfox();
	export default {
		data() {
			return {
				phone:'',
				Code:''
			};
		},
		onLoad(e){
			this.phone=e.phone;
			console.log("电话",this.phone);
		},
		methods:{
			next:function() {
// 				var phone=this.phone;
				var Code=this.Code;
				
			},
			mCode:function(event){
				this.Code = event.target.value;
				
			    console.log("验证码",this.Code);
				
			}
		}
	}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
	.send
		padding 10upx 15upx
		margin-top 30upx
	.datas
		padding 10upx 15upx
		margin 10upx 0
		font-size 28upx
	.inputBox
		display flex
		align-items center   
		justify-content space-around
		flex-direction row
		.input
			width 80upx
			height 80upx
			border 1upx solid #BBBBBB
	.active
		width 90%
		height 100upx
		margin 80upx auto
		.activeBtn
			width 100%
			background #F76968
			color #fff
</style>
